<template>
    <div>
        <el-tag
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type">
            {{ tag.name }}
        </el-tag>
    </div>
</template>

<script>
    import {reactive, toRefs} from "vue";

    export default {
        name: 'Tag',
        setup() {
            const data = reactive({
                tags: [
                    {name: '标签一', type: ''},
                    {name: '标签二', type: 'success'},
                    {name: '标签三', type: 'info'},
                    {name: '标签四', type: 'warning'},
                    {name: '标签五', type: 'danger'}
                ]
            })
            return {
                ...toRefs(data)
            }

        }
    }
</script>

<style scoped>

</style>
